<template>
  <div class="contain">
    <div class="msg">
      已消费订单列表
    </div>
    <el-table
      :cell-style="isCenter"
      :header-cell-style="headCenter"
      :data="tableData"
      border
      class="body_table">
      <el-table-column
        prop="user_id"
        label="用户id"
        width="150">
      </el-table-column>
      <el-table-column
        prop="order_id"
        label="订单id"
        width="310"
        show-overflow-tooltip>
      </el-table-column>
      <el-table-column
        prop="food_name"
        label="商品名称"
        width="180"
        show-overflow-tooltip>
      </el-table-column>
      <el-table-column
        prop="totalNum"
        label="总数量"
        width="70">
      </el-table-column>
      <el-table-column
        prop="totalPrice"
        label="总价格"
        width="70">
      </el-table-column>
      <el-table-column
        prop="orderDate"
        label="订单日期"
        width="150"
        show-overflow-tooltip>
      </el-table-column>
      <el-table-column
        label="状态"
        width="100">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small">已消费</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
import { post } from '../../assets/http'
export default {
  name: 'OrderHistory',
  data () {
    return {
      tableData: [
        // {user_id: '1', order_id: '293ce1d0-1092-4c63-8906-61f0a8ae99b1', food_name: '香辣鸡腿堡', totalNum: '6', totalPrice: '72', orderDate: '预约日期:2020-03  00:00'}
      ]
    }
  },
  mounted () {
    var storeId = this.$route.query.store_id
    if (storeId != null && storeId !== undefined) {
      post('/store/getOrderHistory', {store_id: storeId}).then(res => {
        if (res.flag) {
          this.tableData = res.data
        } else {
          this.$message('暂未订单')
        }
      })
    }
  },
  methods: {
    isCenter (row, column, rowIndex, columnIndex) {
      return 'text-align:center'
    },
    headCenter (row, rowIndex) {
      return 'text-align:center'
    },
    handleClick (a) {
      // console.log(a)
      // 路由传参

    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.contain{
  width: 85%;
  margin: 10px auto;
  position: relative;
}
.head_form{
  margin-left: 3%;
}
.body_table{
  margin: 0px auto;
  width: 1030px;
}
.msg{
  margin: 10px auto;
  text-align: center;
  font-size: 35px;
  color: aquamarine;
}

</style>
